<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">工单回执</block>
		</cu-custom>
		<form>
			
			<view class="cu-form-group">
				<view class="title">维护前照片</view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">维护后照片<text class="required-star">*</text></view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in afterImgList" :key="index" @tap="afterViewImage" :data-url="afterImgList[index]">
					 <image :src="afterImgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red radius" @tap.stop="afterDelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="afterChooseImage">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">故障原因<text class="required-star">*</text></view>
				<input placeholder="请输入故障原因" name="input" v-model="myFormData.failureCause"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">处理方法<text class="required-star">*</text></view>
				<input placeholder="请输入处理方法" name="input" v-model="myFormData.processingMethod"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">处理结果<text class="required-star">*</text></view>
				 <radio-group v-model="checkboxValues" @change="checkboxChange">
				  <label class="radio-container" v-for="(item, index) in checkboxOptions" :key="index">
					<radio :value="item.value" :checked="item.checked">{{ item.name }}</radio>
				  </label>
				</radio-group>
			</view>
			<view class="cu-form-group">
				<view class="title">流量卡</view>
				<input placeholder="请输入流量卡" name="input" v-model="myFormData.trafficCard"></input>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				switchC: true,
				imgList: [],
				afterImgList: [],
				beforeMaintenance:[],
				afterMaintenance:[],
				uploadUrl:"/sys/common/upload",
				myFormData:{
					beforeMaintenance:',',
					afterMaintenance:',',
					realname:'',
					username:'',
					sex:1,
					birthday:'',
					orgCode:'',
					workNo:'',
					phone:'',
					email:'',
					id:'',
					attendanceRecordList:[],
				},
				checkboxValues: [], // 存储选中的复选框的值
				checkboxOptions: [
					{ name: '现场维修正常', value: '1', checked: false },
					{ name: '现场升级侍观察', value: '4', checked: false },
					{ name: '更换备用主机', value: '3', checked: false },
					{ name: '需要返厂维修', value: '2', checked: false },
					{ name: '远程处理正常', value: '5', checked: false },
				],
			};
		},
		onLoad: function (option) {
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			console.log("this.$Route.query",this.$Route.query);
			let query=this.$Route.query
			if(query){
				this.myFormData=query;
				if(this.myFormData.sex=='女'){
				  this.switchC = false
				}else if(this.myFormData.sex=='男'){
				  this.switchC = true
				}
				if(this.myFormData.avatar){
				  this.imgList=[this.myFormData.avatar]
				}
				if(!this.myFormData.birthday){
				  this.myFormData.birthday= '无'
				}
				if(this.myFormData.identity=='普通成员'){
				  this.myFormData.identity = 1
				}else if(this.myFormData.identity=='上级'){
				  this.myFormData.identity = 2
				}
				if(this.myFormData.status=='正常'){
				  this.myFormData.status = 1
				}else if(this.myFormData.status=='冻结'){
				  this.myFormData.status = 2
				}
				 this.Avatar=this.myFormData.avatar
	
				Object.keys(this.myFormData).map(key=>{
				  if(this.myFormData[key]=='无'){
					this.myFormData[key] = ''
				  }
				})
				console.log("this.myFormData",this.myFormData)
			}
		},
		methods: {
			checkboxChange(e) {
				this.myFormData.processingResults=e.detail.value;
			  console.log('选中的复选框值：', this.myFormData.processingResults);
			  // 在这里处理复选框的选中状态变化
			},
			onSubmit() {
			  let myForm = this.myFormData
			  let that = this;
			  let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			  let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
			  console.log("myForm",myForm)
			  if(!that.afterMaintenance || that.afterMaintenance.length==0){
					this.$tip.alert('请选择维护后照片');
					return false
			  }
			  if(!myForm.failureCause || myForm.failureCause.length==0){
					this.$tip.alert('请输入故障原因');
					return false
			  }
			  if(!myForm.processingMethod || myForm.processingMethod.length==0){
					this.$tip.alert('请输入处理方法');
					return false
			  }
			  if(!myForm.processingResults || myForm.processingResults.length==0){
					this.$tip.alert('请选择处理结果');
					return false
			  }
				// this.msgList.push(annItem)
				that.beforeMaintenance.forEach(function(item, index, array) {
				  myForm.beforeMaintenance+=item+',';
				});
				that.afterMaintenance.forEach(function(item, index, array) {
				  myForm.afterMaintenance+=item+',';
				});
				let arr = [];
				let obj = {"beforeMaintenance":'',"afterMaintenance":myForm.afterMaintenance.slice(0, -1),"failureCause":myForm.failureCause,"processingMethod":myForm.processingMethod,"processingResults":myForm.processingResults,"trafficCard":myForm.trafficCard};
				if(myForm.beforeMaintenance && myForm.beforeMaintenance.length>0){
					obj.beforeMaintenance=myForm.beforeMaintenance.slice(0, -1);
				}
				arr.push(obj);
				let formDatas = {};
				formDatas.id=this.myFormData.id;
				formDatas.workOrderReceiptList=arr;
				console.log('myform',formDatas)
				this.$tip.loading();
				this.$http.post('/work/workOrder/editWorkOrderReceipt',formDatas).then(res=>{
					console.log(res)
					this.$tip.loaded();
					if (res.data.success){
						that.$tip.toast(res.data.message);
						that.myFormData.workOrderStatus=9;
						this.$Router.push({name:'detail', params:that.myFormData});
						/* uni.navigateTo({
							url: '/pages/user/userdetail'
						}) */
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			DateChange(e) {
				this.myFormData.birthday = e.detail.value
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			ChooseImage() {
				var that=this;
				that.myFormData.beforeMaintenance='';
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可选择视频来源
					success: (res) => {
						for(let filePath of res.tempFilePaths){
							that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: filePath,
								name: 'file'
							})
							.then(res => {
								that.beforeMaintenance.push(res.data.message);
								// that.myFormData.beforeMaintenance+=res.data.message+',';
								console.log("beforeMaintenance===",that.beforeMaintenance)
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						}
						res.tempFilePaths.forEach(function(item, index, array) {
						  console.log(item);
						  that.imgList.push(item);
						  console.log("this.imgList3333==",that.imgList)
						});
					}
				});
			},
			afterChooseImage() {
				var that=this;
				that.myFormData.afterMaintenance='';
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可选择视频来源
					success: (res) => {
						for(let filePath of res.tempFilePaths){
							that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: filePath,
								name: 'file'
							})
							.then(res => {
								that.afterMaintenance.push(res.data.message);
								// that.myFormData.afterMaintenance+=res.data.message+',';
								console.log("afterMaintenance===",that.afterMaintenance)
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});					
						}
						res.tempFilePaths.forEach(function(item, index, array) {
						  console.log(item);
						  that.afterImgList.push(item);
						  console.log("this.afterImgList3333==",that.afterImgList)
						});
						// this.afterImgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			afterViewImage(e) {
				uni.previewImage({
					urls: this.afterImgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},afterDelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							console.log("this.afterImgList===",this.afterImgList)
							this.afterImgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.radio-container {
	  /* display: block;
	  margin-bottom: 5px;
	  margin-right: 12px;*/
	  line-height: 30px;
	}
	uni-radio-group {
	    display: inline-block;
	    width: 75%;
	}
	uni-switch, uni-checkbox, uni-radio {
	    position: relative;
	    width: 50%;
	}
	.required-star {
	    color: red;
	    margin-right: 5px;
	  }
</style>
